import { useEffect, useRef } from "react";
import {
    ArcRotateCamera, Engine, HemisphericLight, MeshBuilder, Scene, Vector3
} from '@babylonjs/core';


const canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


const engine = new Engine(canvas, true);
const scene = new Scene(engine);


const camera = new ArcRotateCamera('Camera', Math.PI / 2, Math.PI / 2, 2, new Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);


const light = new HemisphericLight('pxg', new Vector3(1, 1, 0), scene);

const sphere = MeshBuilder.CreateSphere('sphere', { diameter: 2 }, scene);

engine.runRenderLoop(function () {
    scene.render();
});

const RenderStructure = () => {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const { current } = divRef;
        if (current != null) {
            current.innerHTML = '';
            current.append(canvas);
        }
    }, []);
    return (
        <div ref={divRef}></div>
    );
};

export default RenderStructure;